import { ArrowRight, Bell } from "@nutui/icons-react-taro";
import { Cell, NoticeBar, Tag } from "@nutui/nutui-react-taro";
import { Image, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useRequest } from "ahooks";
import { useState } from "react";
import CommonTitle from "../../components/CommonTitle";
import { getKickbackApi, getLastNoticeApi } from "../../servers/servers";
import DeveUserTable from "./components/DeveUserTable";
import "./index.less";
import { AtCard } from "taro-ui";
import fazhanPng from "../cart/image/fazhan.png";

// import "~taro-ui/dist/style/components/card.scss";

export default () => {
  const [tabIndex, setTabIndex] = useState(0);

  const { data: lastNotice } = useRequest(async () => {
    const _res = await getLastNoticeApi();
    return _res?.data;
  });

  // 在租用户数
  const { data: kickData } = useRequest(async () => {
    const _res = await getKickbackApi();
    return _res?.data;
  });

  return (
    <View className="home_box">
      <Cell.Group divider={false}>
        <Cell
          title={
            <div
              style={{ display: "inline-flex", alignItems: "center" }}
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/index/notice/index`,
                });
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <Bell />
                <span style={{ marginLeft: "5px" }}>公告</span>
              </div>
              <ArrowRight size={12} style={{ marginLeft: "5px" }} />
            </div>
          }
        />
        <NoticeBar
          content={lastNotice?.title}
          // align="center"
          leftIcon={<Tag background="#f53d4d">最新公告</Tag>}
          // align="center"
          rightIcon={<ArrowRight />}
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/index/notice/details/index`,
              success: function (res) {
                // 通过eventChannel向被打开页面传送数据
                res.eventChannel.emit("ceshi", {
                  data: lastNotice,
                });
              },
            });
          }}
        />
      </Cell.Group>

      {/* <CommonTitle title="佣金统计" />
      <DeveUserTable /> */}

      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginLeft: "30rpx",
          marginRight: "30rpx",
          marginTop: 15,
        }}
      >
        <div
          className="home_box_item"
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/cart/pipeline/index`,
            });
          }}
        >
          <View
            className="at-article__info"
            style={{
              borderLeft: "3px solid #80CF25",
              paddingLeft: 3,
              lineHeight: "28rpx",
            }}
          >
            发展用户
          </View>
          <View
            className="at-article__p"
            style={{
              fontWeight: 600,
              fontSize: 24,
            }}
          >
            {kickData?.develop?.current}
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            更新时间
          </View>

          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            {kickData?.develop_update_time}
          </View>
        </div>

        <div
          className="home_box_item"
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/cart/lease/index`,
            });
          }}
        >
          <View
            className="at-article__info"
            style={{
              borderLeft: "3px solid #efaa3a",
              paddingLeft: 3,
              lineHeight: "28rpx",
            }}
          >
            单电用户
          </View>
          <View
            className="at-article__p"
            style={{
              fontWeight: 600,
              fontSize: 24,
            }}
          >
            {kickData?.single?.current}
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            更新时间
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            {kickData?.consumer_update_time}
          </View>
        </div>
      </div>

      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginLeft: "30rpx",
          marginRight: "30rpx",
          marginTop: 15,
        }}
      >
        <div
          className="home_box_item"
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/cart/dianchi/index`,
            });
          }}
        >
          <View
            className="at-article__info"
            style={{
              borderLeft: "3px solid #b57bf4",
              paddingLeft: 3,
              lineHeight: "28rpx",
            }}
          >
            车电用户
          </View>
          <View
            className="at-article__p"
            style={{
              fontWeight: 600,
              fontSize: 24,
            }}
          >
            {kickData?.vehicle?.current}
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            更新时间
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            {kickData?.consumer_update_time}
          </View>
        </div>

        <div
          className="home_box_item"
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/cart/overdue/index`,
            });
          }}
        >
          <View
            className="at-article__info"
            style={{
              borderLeft: "3px solid #5bbae9",
              paddingLeft: 3,
              lineHeight: "28rpx",
            }}
          >
            逾期用户
          </View>
          <View
            className="at-article__p"
            style={{
              fontWeight: 600,
              fontSize: 24,
            }}
          >
            {kickData?.overdue}
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            更新时间
          </View>
          <View
            className="at-article__info"
            style={{
              marginTop: 6,
              fontSize: "27rpx",
            }}
          >
            {kickData?.consumer_update_time}
          </View>
        </div>
      </div>
    </View>
  );
};
